<template>
  <div id="app">
    <a href="https://gitee.com/your-repo/todolist-project">查看代码仓库</a>
    <h1>ToDoList</h1>
    <TodoForm @add="addTodo" />
    <TodoList :todos="todos" @toggle="toggleTodo" @delete="deleteTodo" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import TodoForm from './components/TodoForm.vue';
import TodoList from './components/TodoList.vue';

const todos = ref([
  { id: 1, text: '学习 Vue', completed: false },
  { id: 2, text: '完成作业', completed: false }
]);

const nextId = ref(3);

const addTodo = (text) => {
  todos.value.push({ id: nextId.value++, text, completed: false });
};

const toggleTodo = (id) => {
  const todo = todos.value.find(t => t.id === id);
  if (todo) {
    todo.completed = !todo.completed;
  }
};

const deleteTodo = (id) => {
  todos.value = todos.value.filter(t => t.id !== id);
};
</script>

<style scoped>
#app {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
}
</style>    